<style scoped="scoped">
	.container {
		display: block;
		width: 100%;
		height: 100%;
		background: #efefef;
	}
	
	.header {
		width: 100%;
		/*background: pink;*/
		position: fixed;
		top: 0;
		left: 0;
		height: 0.63rem;
		z-index: 9999;
		opacity: 1;
		display: flex;
		/*红*/
		/*background: linear-gradient(rgb(235, 22, 37) 0%, rgba(255, 255, 255, 0) 100%);  */ 
		/*白*/
		background: linear-gradient(rgba(1, 1, 1, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
	}
	
	.header input {
		flex: 1;
	}
	
	.swiper {
		/*margin-top: 0.63rem;*/
		/*background: black;*/
		/*background: yellow;*/
	}
	
	.nav {
		margin-top: 0.15rem;
		height: 1.55rem;
		width: 100%;
		background: white;
	}
	
	.nav ul {
		display: flex;
	}
	
	.nav ul li {
		flex: 1;
		text-align: center;
		align-items: center;
	}
	
	.nav ul li img {
		width: 0.77rem;
		margin-top: 0.15rem;
	}
	
	.nav ul li p {
		margin-top: 0.1rem;
		font-size: 0.28rem;
		color: #7b7f82;
	}
	
	.nv {
		width: 100%;
		height: 5.81rem;
		background: white;
		margin-top: 0.2rem;
	}
	
	
	
	.nv_title {
		text-align: center;
		margin-top: 0.15rem;
		font-size: 0.28rem;
		color: #f43e63;
		font-weight: bold;
		height: 0.55rem;
    	line-height: 0.55rem;		
	}
	
	.nv .top {
		width: 100%;
		/*background: pink;*/
		height: 2.3rem;
		display: flex;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.nv .top .left {
		width: 50%;
		/*text-align: center;*/
		/*background: green;*/
	}
	
	.nv .top .left dl dd {
		float: left;
	}
	
	.nv .top .right {
		width: 50%;
		/*text-align: center;*/
		/*background: blue;*/
		border-left: 1px solid #f0f0f0;
	}
	
	.nv .bottom {
		width: 100%;
		/*background: yellow;*/
		height: 2.85rem;
	}
	
	.nv .top .right .right_top {
		height: 50%;
		/*background: red;*/
	}
	
	.nv .top .right .right_bottom {
		height: 50%;
		/*background: blue;*/
	}
	.aa{
		width: 1.1rem;
	}
	.nv .bottom ul{
		display: flex;
	}
	.nv .bottom ul li{
		flex: 1;
		height: 2.85rem;
		text-align: center;
		border-left: 1px solid #f0f0f0;
	}
	.nv .bottom ul:nth-child(0){
		border: none;
	}
	.bb{
		width: 1.45rem;
	}
	.price{
		font-size: 0.22rem;
		color: #d12e50;
	}
	.price::before{
		content: "￥";
	}
	.price_before{
		text-decoration: line-through;
		font-size: 0.22rem;
		color: #7b7f82;
	}
	.price_before::before{
		content: "￥";
	}
	 .order {  
	   height: 60px;  
	   line-height: 60px;  
	   text-align: center;  
	}  
	 .order .line {  
	   display: inline-block;  
	   width: 150px;  
	   border-top: 1px solid #ccc ;  
	}  
	.order .txt {  
	   color: #686868;  
	   vertical-align: middle;  
	} 
	.tuijian_img{
		width: 0.2rem;
	}
	.tuijian{
		width: 100%;
		height: 3.5rem;
		background: white;
		background: #efefef;
		margin-top: 0.2rem;
	}
	.tuijian ul {
		display: flex;
		height: 3.5rem;
	}
	.tuijian ul li{
		flex: 1;
		height: 3.5rem;
		background: white;
		text-align: center;
	}
	.tuijian ul li p{
		text-align: left;
	}
	.tuijian ul :first-child{
		margin-right: 0.2rem;
	}
	.cc{
		width: 2rem;
	}
	.main{
		margin-bottom: 1.2rem;
	}
	.desc{
		margin-bottom: 0.15rem;
		font-size: 0.15rem;
		color: #000000;
	}
	.list_img{
		width: 0.6rem;
		margin-left: 0.28rem;
		margin-right: 0.3rem;
		margin-top: 0.1rem;
	}
	.search{
		margin-top: 0.05rem;
		border-radius: 0.11rem;
		border: none;
		outline: none;
		/*background: rgba(255,255,255,0.6);*/
		background: rgba(255,255,255,0.6) url(../images/common/search_icon.png) no-repeat 0.1rem 0.1rem ;
		background-size: 0.35rem;
	}
	input::-webkit-input-placeholder{
		color: white;
		font-size: 0.28rem;
		padding-left: 0.66rem;
	}
	.people_img{
		width: 0.65rem;
		margin-top: 0.1rem;
		margin-left: 0.45rem;
	}
	.login{
		font-size: 0.36rem;
		font-style: normal;
		margin-top: 0.1rem;
		margin-left: 0.2rem;
		margin-right: 0.2rem;
		color: white;
	}
	.name1{
		font-weight: bold;
		margin-top: 0.26rem;
		margin-left: 0.15rem;
		margin-top: 0.15rem;
		font-size: 0.26rem;
	}
	.name2{
		margin-left: 0.15rem;
		font-size: 0.22rem;
		color: #c93b5e;
	}
	.goods_img{
		margin-top: 0.48rem;
	}
	.name3{
		margin-right: 0.6rem;
	}
	.name4{
		margin-left: 0.15rem;
		font-size: 0.22rem;
		color: #7b7f82;
	}
	.name5{
		margin-top: 0.26rem;
		margin-bottom: 0.07rem;
		font-weight: bold;
		font-size: 0.26rem;
	}
	
	.footer {
		width: 100%;
		background: pink;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #ffffff;
		box-shadow: 0.03rem 0.03rem 0.03rem 0.03rem black;
	}
	.footer ul{
		display: flex;
	}
	.footer ul li{
		flex: 1;
		text-align: center;
	}
	.footer ul li img{
		margin-top: 0.15rem;
		width: 0.43rem;
	}
	.footer ul li span{
		display: inline-block;
		margin-bottom: 0.13rem;
	}
</style>

<template>
	<div class="container">
		<div class="header" id="header">
			<img src="../images/common/class.png" alt="" class="list_img" />
			<input type="text" placeholder="输入喜欢的宝贝名称" class="search" />
			<!--<img src="../images/common/my1.png" alt="" class="people_img" />-->
			<span class="login">登录</span>
		</div>
		<div class="swiper">
			<swiper></swiper>
		</div>
		<div class="nav">
			<ul>
				<li>
					<img src="../images/home/index/funset_1.png" alt="" />
					<p>分类</p>
				</li>
				<li>
					<img src="../images/home/index/funset_2.png" alt="" />
					<p>分类</p>
				</li>
				<li>
					<img src="../images/home/index/funset_3.png" alt="" />
					<p>分类</p>
				</li>
				<li>
					<img src="../images/home/index/funset_4.png" alt="" />
					<p>分类</p>
				</li>
				<li>
					<img src="../images/home/index/funset_5.png" alt="" />
					<p>分类</p>
				</li>
			</ul>
		</div>
		<div class="main">
			<div class="nv">
				<p class="nv_title">———— 潮流女装 ————</p>
				<div class="top">
					<div class="left">
						<dl>
							<dd>
								<h1 class="name1">裙装裙装5</h1>
								<p class="name2">精品打折</p>
							</dd>
							<dt><img src="../images/home/goods/goods.png" class="goods_img" alt="" /></dt>
						</dl>
					</div>
					<div class="right">
						<div class="right_top">
							<dl>
								<dd style="float: left;">
									<h1 class="name1 name3">裙装裙装5</h1>
									<p class="name4">精品打折</p>
								</dd>
								<dt><img src="../images/home/goods/goodsdesc1.jpg" alt="" class="aa" /></dt>
							</dl>
						</div>
						<div class="right_bottom">
							<dl>
								<dd style="float: left;">
									<h1 class="name1 name3">裙装裙装5</h1>
									<p class="name4">精品打折</p>
								</dd>
								<dt><img src="../images/home/goods/goodsdesc1.jpg" alt="" class="aa" /></dt>
							</dl>
						</div>
					</div>
				</div>
				<div class="bottom">
					<ul>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="nv">
				<p class="nv_title">———— 品牌男装 ————</p>
				<div class="top">
					<div class="left">
						<dl>
							<dd>
								<h1 class="name1">裙装裙装5</h1>
								<p class="name2">精品打折</p>
							</dd>
							<dt><img src="../images/home/goods/goods.png" class="goods_img" alt="" /></dt>
						</dl>
					</div>
					<div class="right">
						<div class="right_top">
							<dl>
								<dd style="float: left;">
									<h1 class="name1 name3">裙装裙装5</h1>
									<p class="name4">精品打折</p>
								</dd>
								<dt><img src="../images/home/goods/goodsdesc1.jpg" alt="" class="aa" /></dt>
							</dl>
						</div>
						<div class="right_bottom">
							<dl>
								<dd style="float: left;">
									<h1 class="name1 name3">裙装裙装5</h1>
									<p class="name4">精品打折</p>
								</dd>
								<dt><img src="../images/home/goods/goodsdesc1.jpg" alt="" class="aa" /></dt>
							</dl>
						</div>
					</div>
				</div>
				<div class="bottom">
					<ul>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="nv">
				<p class="nv_title">———— 电脑办公 ————</p>
				<div class="top">
					<div class="left">
						<dl>
							<dd>
								<h1 class="name1">裙装裙装5</h1>
								<p class="name2">精品打折</p>
							</dd>
							<dt><img src="../images/home/goods/goods.png" class="goods_img" alt="" /></dt>
						</dl>
					</div>
					<div class="right">
						<div class="right_top">
							<dl>
								<dd style="float: left;">
									<h1 class="name1 name3">裙装裙装5</h1>
									<p class="name4">精品打折</p>
								</dd>
								<dt><img src="../images/home/goods/goodsdesc1.jpg" alt="" class="aa" /></dt>
							</dl>
						</div>
						<div class="right_bottom">
							<dl>
								<dd style="float: left;">
									<h1 class="name1 name3">裙装裙装5</h1>
									<p class="name4">精品打折</p>
								</dd>
								<dt><img src="../images/home/goods/goodsdesc1.jpg" alt="" class="aa" /></dt>
							</dl>
						</div>
					</div>
				</div>
				<div class="bottom">
					<ul>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
						<li>
							<h1 class="name5">阿迪达斯2016</h1>
							<img src="../images/home/index/recomgoods1.jpg" class="bb" alt="" />
							<p class="price">10</p>
							<p class="price_before">20</p>
						</li>
					</ul>
				</div>
			</div>
			<!--两边横线 中间文字-->
			<div class="order">  
			   <span style="white-space:pre;">  </span><span class="line"></span>  
			   <span style="white-space:pre;">  </span><span class="txt" style="font-size: 0.30rem;">
			   	<img src="../images/home/index/recom.png" alt="" class="tuijian_img" />&nbsp;为您推荐</span>  
			   <span style="white-space:pre;">  </span><span class="line"></span>  
			</div>  
			<div class="tuijian">
				<ul>
					<li>
						<img src="../images/home/goods/goodsdesc2.jpg" class="cc" alt="" />
						<p class="desc">ONlY冬季新品雪纺拼接流苏腰带长款连衣裙女</p>
						<p class="price">399.00</p>
					</li>
					<li>
						<img src="../images/home/goods/goodsdesc2.jpg" class="cc" alt="" />
						<p class="desc">ONlY冬季新品雪纺拼接流苏腰带长款连衣裙女</p>
						<p class="price">399.00</p>
					</li>
				</ul>
			</div>
			<div class="tuijian">
				<ul>
					<li>
						<img src="../images/home/goods/goodsdesc2.jpg" class="cc" alt="" />
						<p class="desc">ONlY冬季新品雪纺拼接流苏腰带长款连衣裙女</p>
						<p class="price">399.00</p>
					</li>
					<li>
						<img src="../images/home/goods/goodsdesc2.jpg" class="cc" alt="" />
						<p class="desc">ONlY冬季新品雪纺拼接流苏腰带长款连衣裙女</p>
						<p class="price">399.00</p>
					</li>
				</ul>
			</div>
			<div class="tuijian">
				<ul>
					<li>
						<img src="../images/home/goods/goodsdesc2.jpg" class="cc" alt="" />
						<p class="desc">ONlY冬季新品雪纺拼接流苏腰带长款连衣裙女</p>
						<p class="price">399.00</p>
					</li>
					<li>
						<img src="../images/home/goods/goodsdesc2.jpg" class="cc" alt="" />
						<p class="desc">ONlY冬季新品雪纺拼接流苏腰带长款连衣裙女</p>
						<p class="price">399.00</p>
					</li>
				</ul>
			</div>
			<div class="tuijian">
				<ul>
					<li>
						<img src="../images/home/goods/goodsdesc2.jpg" class="cc" alt="" />
						<p class="desc">ONlY冬季新品雪纺拼接流苏腰带长款连衣裙女</p>
						<p class="price">399.00</p>
					</li>
					<li>
						<img src="../images/home/goods/goodsdesc2.jpg" class="cc" alt="" />
						<p class="desc">ONlY冬季新品雪纺拼接流苏腰带长款连衣裙女</p>
						<p class="price">399.00</p>
					</li>
				</ul>
			</div>
			<div class="tuijian">
				<ul>
					<li>
						<img src="../images/home/goods/goodsdesc2.jpg" class="cc" alt="" />
						<p class="desc">ONlY冬季新品雪纺拼接流苏腰带长款连衣裙女</p>
						<p class="price">399.00</p>
					</li>
					<li>
						<img src="../images/home/goods/goodsdesc2.jpg" class="cc" alt="" />
						<p class="desc">ONlY冬季新品雪纺拼接流苏腰带长款连衣裙女</p>
						<p class="price">399.00</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="footer">
			<ul>
				<li>
					<img src="../images/common/home2.png" alt="" /><br />
					<span>首页</span>
				</li>
				<li>
					<img src="../images/common/cart1.png" alt="" /><br />
					<router-link to="/shopCar"><span>购物车</span></router-link>
				</li>
				<li>
					<img src="../images/common/my1.png" alt="" /><br />
					<span>我的</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import swiper from "./swiper.vue"

	export default {
		data() {
			return {
				scrollTop:""
			}
		},
		components: {
			swiper
		},
		methods:{
			handleScroll () {
				console.log(111)
				this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  				document.getElementById("header").style.background="-webkit-linear-gradient(top,rgba(255,0,0,1),rgba(255,255,255,0))"
  				if(this.scrollTop == 0){
  					document.getElementById("header").style.background="-webkit-linear-gradient(rgba(1, 1, 1, 0.2) 0%, rgba(255, 255, 255, 0) 100%)"
  				}
			}

		},
		mounted(){
			window.addEventListener("scroll",this.handleScroll)
			console.log(1);
		}
	}
</script>